<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_页面固定广告条</title>
    <style>
        .top{
            height: 120px;
            background-color: #5AA4AE;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad, aliquid deleniti ea est expedita omnis tenetur
            ut. Aperiam, atque exercitationem nam natus nemo obcaecati quidem repellat suscipit totam voluptates.
        </div>
        <div>Ab deleniti distinctio facilis fuga fugit necessitatibus quo quos sed tempora ut. A dignissimos eius error
            fugiat maiores nobis optio quaerat quibusdam saepe. Assumenda cupiditate exercitationem facere necessitatibus
            reiciendis rem.
        </div>
        <div>A atque delectus earum enim est eum, eveniet facilis illo illum ipsam iste iure laudantium, modi molestias
            mollitia natus non officiis optio porro quisquam sed soluta sunt temporibus ullam, unde.
        </div>
        <div>Aperiam doloribus ex harum minus nemo, pariatur provident ratione recusandae sint temporibus? Adipisci
            assumenda, ducimus ea excepturi facere laborum maxime neque nihil nulla quam ratione sequi sunt temporibus ut
            vel?
        </div>
        <div>Adipisci asperiores aspernatur, atque autem blanditiis fuga impedit iure laudantium maxime natus porro quae
            quos, sed tempora veniam, vero voluptate! Ad consequatur cupiditate dolorum ipsam modi obcaecati quibusdam quos
            voluptate?
        </div>
        <div>Adipisci aperiam corporis eaque esse, facere facilis laborum, modi mollitia numquam pariatur qui repudiandae
            tenetur vero! Accusantium deleniti, ea ipsam itaque, iusto numquam pariatur praesentium quas qui, quis ullam
            voluptatem.
        </div>
        <div>Adipisci aspernatur blanditiis cum deserunt, dicta eos esse est eum eveniet fugiat illo impedit inventore non
            odio perspiciatis quos recusandae soluta ut voluptatem voluptates? Cumque ullam, vel? Incidunt maxime,
            voluptatem.
        </div>
        <div>Ad alias delectus, illo laudantium nobis nulla numquam officia quidem reprehenderit temporibus, veritatis
            voluptatibus. Atque autem beatae cumque cupiditate, delectus, dignissimos eaque harum laboriosam nemo, neque
            perspiciatis possimus quidem voluptatem!
        </div>
        <div>Cupiditate necessitatibus perferendis provident. Ab aspernatur deleniti deserunt, dignissimos eaque laudantium
            necessitatibus nisi perferendis provident quas quidem quis ratione recusandae, reiciendis rerum sed, veniam
            voluptate voluptatem! At delectus laudantium obcaecati?
        </div>
        <div>Accusamus ad alias aliquid consectetur cupiditate dolorem doloribus eaque error incidunt molestias nemo nulla
            possimus, quae quasi quod reprehenderit rerum similique sit soluta totam. Accusantium aliquam dolores porro quos
            voluptate.
        </div>
        <div>Accusamus asperiores autem consequuntur fuga ipsum laudantium modi mollitia, nam praesentium quas qui sunt?
            Accusantium aliquid asperiores assumenda dolorem dolorum, ducimus, explicabo, hic maiores natus reprehenderit
            saepe sapiente sunt voluptatem.
        </div>
        <div>A cupiditate expedita nemo quo reprehenderit soluta totam! Aliquid consequatur cum dolore eaque esse incidunt
            magni nam repudiandae! Debitis, delectus eum nemo neque repellendus tenetur. Consectetur eius quaerat quam vero.
        </div>
        <div>Ab adipisci beatae commodi consectetur cum dolorem dolorum facilis fugiat harum id natus neque nesciunt
            perspiciatis praesentium quia, quidem reiciendis rem reprehenderit? Fugit incidunt officia totam. Officia, sed,
            suscipit. Unde?
        </div>
        <div>Ab accusamus adipisci blanditiis consequuntur dignissimos distinctio ea error est facere, illo illum, ipsam,
            ipsum magni natus neque obcaecati omnis optio quis repellat repellendus saepe sapiente similique tempora tenetur
            vel?
        </div>
        <div>Ab aspernatur cum debitis deleniti dolore dolorum, earum est facilis incidunt, magnam modi molestias nam natus
            nemo non nulla odit officiis quia recusandae reprehenderit rerum temporibus ut voluptas voluptate voluptatum?
        </div>
        <div>Cupiditate ea facilis laboriosam obcaecati optio quis suscipit, voluptatum! Consectetur dolore doloremque esse
            neque officia officiis quo, saepe? Nam, quibusdam, vero. Doloribus expedita fugit laboriosam minus nostrum
            officiis tenetur vel.
        </div>
        <div>Aliquam consequatur dolorum ea facilis optio quaerat sequi, soluta. Alias asperiores corporis cupiditate dolore
            dolorem et id, laborum minima modi nam non obcaecati placeat quam quod ratione sint tempora. Delectus?
        </div>
        <div>Aut, consequuntur, ex! Ab asperiores consectetur consequuntur cum cupiditate et expedita explicabo facere
            facilis fugit, impedit incidunt itaque laborum laudantium nam nesciunt numquam officia quaerat quos soluta
            tempora, vero voluptatem!
        </div>
        <div>Accusantium aspernatur commodi, dolore, ex expedita illum inventore magnam magni molestias nihil pariatur
            quisquam, quod? Adipisci excepturi libero non! Aliquam autem distinctio eaque facere ipsa nisi, numquam possimus
            sequi voluptatum.
        </div>
        <div>Adipisci amet aut blanditiis deleniti deserunt eaque excepturi, exercitationem in inventore, ipsum iste
            laudantium magnam molestias numquam odio optio porro praesentium provident quaerat quas quidem ratione
            reiciendis sequi sunt voluptates.
        </div>
        <div>Enim in perspiciatis quas sapiente velit. Deserunt ea eius enim eos odio officiis praesentium suscipit.
            Accusamus architecto et exercitationem expedita illo nemo odit, officiis pariatur quis suscipit! Ipsum, porro
            voluptates.
        </div>
        <div>Beatae cupiditate excepturi maiores, mollitia repellendus reprehenderit similique vel. Dolores eaque facere
            quae recusandae tempora voluptates? Est harum ipsum nihil optio quod, sed totam vel. Ad earum perspiciatis rem
            vel!
        </div>
        <div>Deserunt, dolor doloribus ducimus impedit, ipsa iure laborum magni molestiae mollitia necessitatibus nesciunt
            non provident, quaerat quas sint! Culpa delectus distinctio ipsum maiores mollitia pariatur qui quisquam
            reiciendis repudiandae sapiente.
        </div>
        <div>Atque error esse fugiat illum impedit labore molestias nesciunt nobis omnis placeat porro quidem, quisquam,
            ratione, recusandae reiciendis rem reprehenderit tempore! Ab, corporis esse maxime molestias quam reiciendis!
            Commodi, laudantium.
        </div>
        <div>Aperiam at, cumque, dolore eaque enim error eveniet exercitationem illo maxime non officia, pariatur quam
            quidem quis quod rem vitae. Aliquam consequuntur dignissimos laboriosam minima omnis placeat provident, repellat
            ullam.
        </div>
        <div>Accusamus cupiditate eveniet exercitationem impedit nemo suscipit temporibus. Ab assumenda commodi explicabo id
            placeat porro quaerat sed similique tenetur voluptatem? A atque beatae excepturi id laborum pariatur quod sed,
            sit.
        </div>
        <div>Accusamus alias commodi cumque dolore eveniet omnis pariatur porro sequi totam ut. Adipisci architecto at iste
            sequi tenetur? Ad dolorum in magnam modi nam officiis repellat? Accusamus ea in quod.
        </div>
        <div>Asperiores assumenda beatae consequuntur dicta dolores est et excepturi explicabo illum in ipsum iure,
            necessitatibus nisi nostrum officiis pariatur perferendis placeat praesentium quas suscipit ullam unde vel
            velit, voluptates voluptatum.
        </div>
        <div>Dolorum earum exercitationem explicabo quas quod voluptas! Doloremque earum enim, fugiat natus nemo nobis
            quidem sapiente suscipit temporibus vel. Amet assumenda dignissimos eos laborum nesciunt officia quibusdam
            sapiente. In, obcaecati?
        </div>
        <div>A corporis deserunt dignissimos excepturi iusto modi, odit quisquam quod reprehenderit sed sequi tempora unde
            veritatis? Aliquam amet, aperiam assumenda impedit incidunt minus nihil omnis perspiciatis provident rem, sequi
            sit.
        </div>
        <div>Accusantium aliquam autem blanditiis dolores fugit minima numquam placeat ratione tempora voluptas. Ab alias
            atque earum, eius eos error eveniet expedita inventore, laboriosam maiores obcaecati perspiciatis rerum saepe
            vel vero?
        </div>
        <div>Assumenda dolore error esse explicabo fugit provident quis, reprehenderit sit. Adipisci architecto atque nemo
            nisi nostrum provident! Alias eos ipsa non ut velit voluptates. Assumenda atque cum excepturi non reiciendis.
        </div>
        <div>Dolore dolores esse pariatur perspiciatis quaerat quis recusandae repellat repellendus veritatis vitae! Aliquam
            aliquid architecto aspernatur dolorum enim facere impedit iusto nemo officia pariatur, quae quas qui, quod
            reiciendis, voluptate.
        </div>
        <div>Accusantium aliquid consequatur cumque, deleniti dignissimos dolor dolorem eius eveniet expedita ipsum minus
            modi nobis nostrum officia quidem quis reiciendis repellat repudiandae sequi sint sit suscipit unde, veniam.
            Aut, earum!
        </div>
        <div>Blanditiis, eaque harum impedit in incidunt magnam pariatur quibusdam tempora voluptates? Atque blanditiis,
            doloremque ex fuga ipsum magnam, quibusdam, repudiandae rerum sunt suscipit temporibus unde veniam! At incidunt
            ipsam qui.
        </div>
        <div>Commodi ducimus labore natus necessitatibus nemo nisi pariatur porro provident quae quidem quo quod repellendus
            repudiandae temporibus, veniam. A culpa distinctio ipsum, necessitatibus praesentium provident quam quia ratione
            recusandae suscipit.
        </div>
        <div>Asperiores mollitia necessitatibus nemo quam quod. Animi, delectus dolorem error ex ipsum non provident! Alias
            at atque consequuntur debitis dolores, error id ipsum iure mollitia possimus reprehenderit tempore tenetur unde.
        </div>
        <div>Accusamus debitis sed sequi! Accusantium beatae fugit iusto nulla placeat sit tempore. Dicta distinctio earum
            et expedita facere fuga illo illum incidunt nulla, perspiciatis quaerat, rem soluta veritatis vero voluptatibus!
        </div>
        <div>Earum enim eveniet expedita placeat voluptatem. Aliquam animi aspernatur cupiditate dolorum eos est modi nemo
            odit temporibus vitae? Consequatur consequuntur corporis delectus dolores doloribus ipsum omnis qui quo sed
            tenetur.
        </div>
        <div>Aspernatur assumenda beatae consequuntur cupiditate debitis deserunt dolorem doloremque error facere facilis
            illo illum in iure iusto nam nesciunt nostrum obcaecati omnis quos recusandae repellat, reprehenderit similique
            tenetur unde voluptatibus.
        </div>
        <div>Ab, autem dicta distinctio expedita fugit id odio omnis optio perspiciatis praesentium quis repellendus
            voluptas voluptate! A at blanditiis, culpa cum, deserunt dolor excepturi facere odit optio rerum, tempore
            tenetur?
        </div>
        <div>Adipisci excepturi fuga itaque iure libero, magnam officia voluptates. Cumque, inventore quia. Ex iure pariatur
            voluptas. Ad assumenda, corporis dolorem incidunt placeat quidem quod similique soluta ullam voluptates!
            Quisquam, totam.
        </div>
        <div>Aperiam autem doloribus expedita quibusdam! Accusamus assumenda dignissimos doloremque natus perspiciatis sint
            suscipit voluptatem? Ad alias aut iure iusto labore laboriosam laudantium molestiae nobis quaerat quibusdam
            rerum suscipit, tempora. Itaque.
        </div>
        <div>Ad aperiam consequuntur culpa cum dolores dolorum eos excepturi exercitationem expedita fuga hic itaque libero
            maxime, nemo nisi, praesentium quae quasi quibusdam, ratione recusandae repellat rerum sint soluta tempore vero!
        </div>
        <div>Aperiam aspernatur commodi earum, et exercitationem id, iure, laborum nisi possimus quaerat quis reiciendis
            vitae voluptatum! A adipisci deserunt facilis in provident quisquam, sed sint temporibus voluptate voluptatibus!
            Qui, sint.
        </div>
        <div>Corporis eligendi minus odio vitae. Accusamus amet consequatur delectus deleniti exercitationem! A consectetur,
            dolor dolorum ea excepturi explicabo incidunt, ipsam labore magni neque nobis nostrum optio pariatur quod
            tempore, voluptates.
        </div>
        <div>Aliquam autem cum cupiditate, dicta dolorem eaque et in incidunt labore laudantium magni modi molestias, nihil
            placeat possimus praesentium quisquam quos reiciendis vitae voluptatum. Debitis deleniti doloremque libero
            praesentium voluptas.
        </div>
        <div>Animi deserunt distinctio dolorem doloremque dolorum eius et iure laborum magnam magni maiores minima modi nam
            nemo officia perferendis, possimus qui sequi totam ullam vitae voluptas voluptate? Ex, facere reiciendis!
        </div>
        <div>Ab alias, consectetur ea eius eveniet fugiat itaque, nesciunt nobis omnis optio perspiciatis quaerat rem soluta
            ullam voluptas voluptate voluptatem? Delectus et iusto, magni nisi non similique vel vitae voluptatem?
        </div>
        <div>Dicta porro provident vitae. A commodi consequuntur dicta enim exercitationem itaque, libero nam omnis quidem
            quo tempore vel voluptatem, voluptatum. Ipsum perferendis, ullam? Distinctio expedita laudantium magni quidem
            repellendus vel?
        </div>
    </div>
</body>
</html>